import { QUIView } from "./QUIView";
import QGamePlugin from "./QGamePlugin";

export type QUIInputConfig = {
    id?: string;
    class?: string;
    left?: number;
    top?: number;
    right?: number | undefined;
    bottom?: number | undefined;
    text?: string;
    width?: number;
    height?: number;
    widthRatio?: number;
    heightRatio?: number;
    background?: string | number;
    placeholder?: string;

    fontSize?: number;
    fontColor?: string;
    fontFamily?: string;
    alpha?: number;
    borderWidth?: number;
    borderColor?: number | string;
    inputType?: "text" | "password" | "email" | "number";

    onInput?: (value: string) => void;
};

export class QUIInput extends QUIView {
    protected name: string = "QUIInput";

    private text: string = "";
    private label: Phaser.GameObjects.Text;
    private label2: Phaser.GameObjects.Text;

    private fontSize: number = 16;
    private fontColor: string = "#ff0";
    private fontFamily: string = "Arial";
    private inputType: "text" | "password" | "email" | "number" = "text";
    public onInput?: (value: string) => void;

    get Text(): string {
        return this.text;
    }

    set Placeholder(value: string) {
        this.label2.setText(value);
    }

    get Placeholder(): string {
        return this.label2.text;
    }

    set Text(value: string) {
        this.text = value;
        if (this.InputType === "password" && value.length > 0) {
            this.label.setText(value.replace(/./g, "*"));
        } else {
            this.label.setText(value);
        }

        /** 文字居中 */
        if (this.text.length > 0) {
            this.label.x = 5;
            this.label.y = this.Height / 2 - this.label.height / 2;
            this.label2.setVisible(false);
        } else {
            this.label2.x = 5;
            this.label2.y = this.Height / 2 - this.label2.height / 2;
            this.label2.setVisible(true);
        }
    }

    set FontSize(value: number) {
        if (typeof value === "string") value = parseInt(value);
        this.fontSize = value;
        this.label.setFontSize(this.fontSize);
        this.label2.setFontSize(this.fontSize);
        /** 文字居中 */
        this.label.x = 5;
        this.label.y = this.Height / 2 - this.label.height / 2;

        this.label2.x = 5;
        this.label2.y = this.Height / 2 - this.label2.height / 2;
    }

    get FontSize(): number {
        return this.fontSize;
    }

    set FontColor(value: string) {
        this.fontColor = value;
        this.label.setColor(this.fontColor);
        // this.label2.setColor(this.fontColor);
    }

    get FontColor(): string {
        return this.fontColor;
    }

    set FontFamily(value: string) {
        this.fontFamily = value;
        this.label.setFontFamily(this.fontFamily);
        this.label2.setFontFamily(this.fontFamily);
    }

    get FontFamily(): string {
        return this.fontFamily;
    }

    constructor(
        scene: Phaser.Scene,
        manage: QGamePlugin,
        config?: QUIInputConfig
    ) {
        if (config == null || config === undefined) {
            config = {};
        }
        if (config.width === undefined) {
            config.width = 100;
        }
        if (config.height === undefined) {
            config.height = 26;
        }
        if (config.background === undefined) {
            config.background = "#eeeeee";
        }
        // if (config.text === undefined) {
        //     config.text = "";
        // }
        if (config.fontSize === undefined) {
            config.fontSize = 10;
        }
        if (config.fontColor === undefined) {
            config.fontColor = "#000000";
        }
        if (config.borderWidth === undefined) {
            config.borderWidth = 1;
            //#1980f5
            config.borderColor = "#1980f5";
        }
        if (config.placeholder === undefined) {
            config.placeholder = "请输入内容...";
        }
        if (config.inputType === undefined) {
            config.inputType = "text";
        }

        config.alpha = 1;
        super(scene, manage, config);

        this.label = scene.add.text(0, 0, "");
        this.label.setOrigin(0, 0);

        this.label2 = scene.add.text(0, 0, "");
        this.label2.setOrigin(0, 0);

        if (config) {
            if (config.text !== undefined) {
                this.Text = config.text;
            }
            if (config.fontSize) {
                this.FontSize = config.fontSize;
            }
            if (config.fontColor) {
                this.FontColor = config.fontColor;
            }

            if (config.fontFamily) {
                this.FontFamily = config.fontFamily;
            }
            if (config.placeholder) {
                this.Placeholder = config.placeholder;
            }
            if (config.inputType) {
                this.InputType = config.inputType;
            }
        }
        this.Container.add(this.label);
        this.Container.add(this.label2);
        this.label2.setColor("#999");

        if (this.label.text.length > 0) {
            this.label2.setVisible(false);
        }
    }

    set InputType(value: "text" | "password" | "email" | "number") {
        this.inputType = value;
    }
    get InputType(): "text" | "password" | "email" | "number" {
        return this.inputType;
    }

    private isInput: boolean = true;

    public closeInput() {
        this.isInput = false;
    }

    public openInput() {
        this.isInput = true;
        if (this.onInput) {
            this.onInput(this.Text);
        }
    }

    protected _pointerdown(e: Phaser.Input.Pointer): void {
        if (!this.isInput) return;

        const text = prompt("请输入文本", this.Text);
        if (text) {
            if (this.inputType === "number") {
                if (isNaN(text as any)) {
                    alert("请输入数字");
                    return;
                }
            }

            if (this.inputType === "email") {
                const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if (!reg.test(text)) {
                    alert("请输入正确的邮箱");
                    return;
                }
            }
        }

        this.Text = text || "";

        if (this.onInput) {
            this.onInput(text || "");
        }
    }

    public destroy() {
        this.label.destroy(true);
        super.destroy();
    }

    public getViewAttribute() {
        return {
            ...super.getViewAttribute(),
            text: this.Text,
            fontSize: this.FontSize,
            fontColor: this.FontColor,
            fontFamily: this.FontFamily,
            placeholder: this.Placeholder,
            inputType: this.InputType,
        };
    }
}
